<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @click="backOne">
				<image src="../../static/img/common/back.png" mode=""></image>
			</view>
			<view class="top-bar-center">
				好友请求
			</view>
			<view class="top-bar-right">
				
			</view>
		</view>
		<view class="main">
			<view class="requester" v-for="(item,i) in NewFriend" :key="i">
				<view class="request-top">
					<view class="reject btn" @tap="refuse(item.id,i)">
						拒绝
					</view>
					<view class="avatar">
						<image :src="'../../static/img/img/'+item.avatar"></image>
					</view>
					<view class="agree btn" @tap="pass(item.id,i)">
						同意
					</view>
				</view>
				<view class="request-center">
					<view class="name">
						{{item.name}}
					</view>
					<view class="time">
						{{DateFormate(item.time)}}
					</view>
				</view>
				<view class="request-footer">
					<text>留言:</text>你好，我是小虎。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import DateFormate from '../../common/js/DateFormate.js'
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			...mapActions(['deleteoneNFaction']),
			backOne() {
				uni.navigateBack()
			},
			DateFormate,
			async pass(e,i){
				var {data} = await this.request({
					url:'/friend/new',
					method:"PUT",
					data:{
						uid:this.id,
						fid:e
					}
				})
				if(data.status == 200){
					this.deleteoneNFaction(i)
				}
			},
			async refuse(id,i){
				var {data} = await this.request({
					url:'/friend/new',
					method:'DELETE',
					data:{
						uid:this.id,
						fid:id
					}
				})
				if(data.status == 200){
					this.deleteoneNFaction(i)
				}
			}
		},
		computed:{
			...mapState(['NewFriend','id']) 
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/css/base.scss";
	.top-bar {
		@include top-bar(#FFF);
		z-index: 999;
	
		.top-bar-left {
			padding: 0;
			padding-top: 20rpx;
			box-sizing: border-box;
	
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	
	}
	.main{
		padding: 108rpx 32rpx 0;
		.requester{
			margin-top: 112rpx;
			background-color: rgba(255,255,255,1);
			box-shadow: 0rpx 24rpx 64rpx -8rpx rgba(0,0,0,.1);
			border-radius: 20rpx;
			padding: 32rpx;
			.request-top{
				display: flex;
				justify-content: space-between;
				height: 64rpx;
				.avatar{
					image{
						position: relative;
						top: -104rpx;
						width: 144rpx;
						height: 144rpx;
						border-radius: 50%;
					}
				}
				.btn{
					text-align: center;
					border-radius: 32rpx;
					background-color: red;
					line-height: 64rpx;
					width: 160rpx;
					height: 64rpx;
					font-size: 32rpx;
				}
				.reject{
					color: rgb(255,93,91);
					background: rgba(255,93,91,.1);
				}
				.agree{
					background: #FFE431;
					color: #000;
				}
			}
			.request-center{
				text-align: center;
				padding-top: 18rpx;
				.name{
					font-size: 36rpx;
					font-weight: 500;
					color: rgb(39,40,50);
					line-height: 50rpx;
					// height: 50rpx;
				}
				.time{
					font-size: 24rpx;
					color: rgba(30,40,50,.4);
					line-height: 34rpx;
				}
			}
		}
		.request-footer{
			margin-top: 40rpx;
			font-size: 28rpx;
			color: rgba(30,40,50,.8);
			line-height: 40rpx;
			padding: 22rpx 16rpx;
			background: #F3F4F6;
			border-radius: 20rpx;
		}
	}
</style>
